<script setup>
  import { ref, onMounted } from 'vue'
  import { getMsgNumCountAPI } from '@/api/order/contract'
  import useList from '@/hooks/useList'
  import OrderItem from './orderItem.vue'
  const tabs = ['全部', '签署中', '已完成', '已撤回', '已作废']

  const recordCounts = ref() //顶部数据

  const searchBarSearch = (e) => {
    queryParam.value.contractNoOrOrderCode = e
    queryParam.value.pageNumber = 1
    dataSource.value = []
    loadData()
    recordCount()
  }
  const queryParam = ref({
    payType: 0,
  })
  const { resetRefresh, reachBottom, loadData, scrollTop, loadStatus, refreshStatus, dataSource } = useList(
    '/V5/svmsContract/signRecord',
    queryParam,
  )
  const tabsChange = (e) => {
    dataSource.value = []
    console.log(queryParam.value)
    queryParam.value.pageNumber = 1
    switch (e) {
      case 0:
        queryParam.value.contractStatus = undefined
        recordCount()
        loadData()
        break
      case 1:
        queryParam.value.contractStatus = 2
        recordCount()
        loadData()
        break
      case 2:
        queryParam.value.contractStatus = 3
        recordCount()
        loadData()
        break
      case 3:
        queryParam.value.contractStatus = 4
        recordCount()
        loadData()
        break
      case 4:
        queryParam.value.contractStatus = 8
        recordCount()
        loadData()
        break
    }
  }
  const recordCount = async () => {
    const res = await getMsgNumCountAPI(queryParam.value)
    console.log(res)
    recordCounts.value = res.result
  }

  const init = (param) => {
    queryParam.value = {
      ...queryParam.value,
      ...param,
    }
    recordCount()
    resetRefresh()
  }
  onMounted(() => {
    loadData()
    recordCount()
  })

  defineExpose({
    init,
  })
</script>

<template>
  <view class="container">
    <view class="page-filter">
      <ve-search-bar placeholder="请输入合同编号/关联订单号/客户名称" @search="searchBarSearch"></ve-search-bar>
      <ve-tabs :actived="0" :list="tabs" @change="tabsChange" style="background: #ffffff"></ve-tabs>
    </view>

    <!-- 列表 -->
    <scroll-view
      scroll-y
      :scroll-top="scrollTop"
      :scroll-with-animation="true"
      refresher-enabled
      :refresher-triggered="refreshStatus"
      :enable-back-to-top="true"
      @refresherrefresh="resetRefresh(true)"
      @scrolltolower="reachBottom"
    >
      <view style="margin: 24rpx 24rpx 0" class="contract_card flex-column">
        <view class="contract_nums flex-row">
          <view class="tlt">已发送的签署短信：</view>
          <text class="pic-num">{{ recordCounts != null ? recordCounts + '条' : '-' }}</text>
        </view>
        <view class="tips">
          <view class="c1 fs26 fw400">普通版电子合同费用说明：</view>
          <view class="c2 fs26 fw400">【发送签署短信】会将签署链接以短信的形式发送给承 租方的手机号，商户需承担短信费用。</view>
        </view>
      </view>
      <view class="record-list">
        <OrderItem v-for="record in dataSource" :record="record" :key="record.id" @resetRefresh="init" />
        <!-- 加载结束列表为空时展示 -->
        <ve-empty v-if="dataSource.length == 0 && loadStatus == 'nomore'"></ve-empty>
        <!-- 底部加载状态 -->
        <ve-load-more v-else :status="loadStatus" bgColor="#F7F7F9"></ve-load-more>
      </view>
    </scroll-view>
  </view>
</template>

<style lang="scss" scoped>
  page {
    background-color: rgba(247, 248, 250, 1);
    padding-bottom: 132rpx;
  }
  .container {
    height: 100vh;
    background-color: rgba(247, 248, 250, 1);
  }
  .flex-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .flex-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }

  .contract_card {
    box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.05);
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    background-color: #fff;
    height: 292rpx;
    justify-content: flex-start;

    .contract_nums {
      position: relative;
      width: 100%;
      background-color: pink;
      justify-content: flex-start;
      padding: 26rpx 0 26rpx 32rpx;
      background-image: url(@/static/images/contract_backimg.png);
      background-size: 100% 100%;
      .tlt,
      .pic-num {
        font-weight: 400;
        font-size: 32rpx;
        color: #ffffff;
        line-height: 44rpx;
      }
      .pic-num {
        color: #fffb00;
        font-weight: 600;
      }
    }

    .tips {
      padding: 24rpx 46rpx 0 32rpx;
      view:nth-child(1) {
        line-height: 46rpx;
        margin-bottom: 6rpx;
      }
    }
  }

  .record-list {
    padding: 24rpx 24rpx;
  }
  .manager-search {
    position: sticky;
    top: 44px;
    z-index: 999;
  }
  .manager-tabs {
    background-color: #fff;
  }
  .ve-bottom-box {
    height: auto;
  }
</style>
